import React, {PureComponent} from "react"
import {bindActionCreators} from "redux"
import {connect} from "react-redux"
import cs from  "classnames";
import { cloneDeep,find} from "lodash";
import PropTypes from "prop-types";
/*ant 组件*/
import {Timeline,Input,Button,Icon,Select,Row,Col} from "antd"
import {sexTypes} from "../../const";
import {addPerson,delPerson} from "../actions";
/*css依赖*/
import "./organize.less"
const propTypes = {
    close: PropTypes.func.isRequired,
    info: PropTypes.object.isRequired,
    person:PropTypes.array.isRequired,
    showNoAssess:PropTypes.func.isRequired,
};
let defalutPerson = {//新增人员信息
    realName:"",
    sex:"0",
    name:"",
    pwd:"",
    duty:"0",
    role:"0",
    "assess":1,
    "manager":"",
    id:""
}
/*redux连接池*/
@connect(
    ({duty,base,role}) => ({
        duty:duty.duty,
        roleTypes:role.roleTypes,
    }),
    (dispatch) => (
        bindActionCreators({
            addPerson,
            delPerson,
        }, dispatch)
    )
)
export default class Index extends PureComponent {
    state = {
        adding:false,
        person:defalutPerson
    }
    render() {
        let {close,info,duty,roleTypes,showNoAssess} = this.props;
        let {adding,person} = this.state;
        return (
            <div  className="organize-modal organize-addPerson">
                <h4>
                    <span onClick={close}><Icon type="left" />返回</span>
                    <Button onClick={()=>{this.setState({adding:true})}}>
                        <Icon type="plus" />添加
                    </Button>
                </h4>
                <h5>{info.name} &emsp;<span onClick={showNoAssess}>+导入无部门人员</span> <span>正在添加人员...</span></h5>
                <div className="organize-addPerson-list">
                    <Row>
                        <Col span="3">姓名</Col>
                        <Col span="3">性别</Col>
                        <Col span="4">警号(账户)</Col>
                        <Col span="3">密码</Col>
                        <Col span="4">职务</Col>
                        <Col span="4">角色</Col>
                        <Col span="3">操作</Col>
                    </Row>
                    {
                        adding && <Row>
                            <Col span="3">
                                <Input placeholder="姓名"
                                       onChange={(e)=>{
                                           this.changePerson({
                                               realName:e.target.value
                                           })
                                       }}
                                       value={person.realName}/>
                            </Col>
                            <Col span="3">
                                <Select placeholder="性别"
                                        value={person.sex}
                                        onChange={(sex)=>{
                                            this.changePerson({
                                                sex
                                            })
                                        }}
                                >
                                    {
                                        sexTypes.map((z)=>{
                                            return (
                                                <Select.Option key={z.name} value={z.id+""}>{z.name}</Select.Option>
                                            )
                                        })
                                    }
                                </Select>
                            </Col>
                            <Col span="4">
                                <Input placeholder="警号"
                                       value={person.name}
                                       onChange={(e)=>{
                                           this.changePerson({
                                               name:e.target.value
                                           })
                                       }}
                                />
                            </Col>
                            <Col span="3">
                                <Input placeholder="密码"
                                       value={person.pwd}
                                       onChange={(e)=>{
                                           this.changePerson({
                                               pwd:e.target.value
                                           })
                                       }}
                                />
                            </Col>
                            <Col span="4">
                                <Select
                                    value={person.duty}
                                    onChange={(duty)=>{
                                        this.changePerson({
                                            duty
                                        })
                                    }}
                                >
                                    {
                                        duty.map((z)=>{
                                            return (
                                                <Select.Option key={z.name} value={z.id+""}>{z.name}</Select.Option>
                                            )
                                        })
                                    }
                                </Select>
                            </Col>
                            <Col span="4">
                                <Select
                                    value={person.role}
                                    onChange={(role)=>{
                                        this.changePerson({
                                            role
                                        })
                                    }}
                                >
                                    {
                                        roleTypes.map((z)=>{
                                            return (
                                                <Select.Option key={z.name} value={z.id+""}>{z.name}</Select.Option>
                                            )
                                        })
                                    }
                                </Select>
                            </Col>
                            <Col span="3">
                                <Icon type="check-square-o"  onClick={this.submitPerson}/>
                                <Icon type="close-square-o" onClick={this.cancelAdd}/>
                            </Col>
                        </Row>
                    }
                    {
                        this.showPerson()
                    }
                </div>
                <p className="organize-addPerson-desc">*仅admin和拥有账户管理权限的用户，才可对职务与角色进行操作</p>
            </div>
        )
    }
    componentDidMount() {
    }
    cancelAdd=()=>{
        this.setState({
            person:defalutPerson,
            adding:false,
        })
    }
    submitPerson=()=>{
        let {person} = this.state;
        let {addPerson} = this.props;
        if(!person.realName || !person.name || !person.pwd){
            return false;
        }
        console.info("新增钱",person);
        person.id = (new Date()).getTime();
        addPerson(person);
        this.cancelAdd();
    }
    changePerson=(option)=>{
        let {person} = this.state;
        let newPerson = cloneDeep(person);
        this.setState({
            person:Object.assign(newPerson,option)
        })
    }
    showPerson=()=> {
        let {person,duty,roleTypes,delPerson,info} = this.props;
        return person.map((i,index)=>{
            return (
                <Row key={i.name}>
                    <Col span="3">
                        <Input defaultValue={i.realName} disabled/>
                    </Col>
                    <Col span="3" className="sex">
                        <Select defaultValue={i.sex} disabled>
                            {
                                sexTypes.map((z)=>{
                                    return (
                                        <Select.Option key={z.name} value={z.id+""}>{z.name}</Select.Option>
                                    )
                                })
                            }
                        </Select>
                    </Col>
                    <Col span="4">
                        <Input defaultValue={i.name} disabled/>
                    </Col>
                    <Col span="3">
                        <Input defaultValue={i.pwd} disabled/>
                    </Col>
                    <Col span="4">
                        <Select defaultValue={i.duty} disabled>
                            {
                                duty.map((z)=>{
                                    return (
                                        <Select.Option key={z.name} value={z.id+""}>{z.name}</Select.Option>
                                    )
                                })
                            }
                        </Select>
                    </Col>
                    <Col span="4">
                        <Select defaultValue={i.role} disabled>
                            {
                                roleTypes.map((z)=>{
                                    return (
                                        <Select.Option key={z.name} value={z.id+""}>{z.name}</Select.Option>
                                    )
                                })
                            }
                        </Select>
                    </Col>
                    <Col span="3">
                        <Icon type="delete"  onClick={()=>{
                            delPerson({
                                ids:[i.id],
                                staffId:info.id
                            })
                        }}/>
                    </Col>
                </Row>
            )
        })
    }

}
